<template>
  <div class="page-films">
    <van-swipe class="page-films__swiper" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerId">
        <img :src="item.imgUrl" alt="">
      </van-swipe-item>
    </van-swipe>

    <lv-tabs v-model="curTabIndex" sticky :tabs="['正在热映', '即将上映']"></lv-tabs>

    <div class="page-films__list">
      <film-item v-for="item in filmList" :key="item.filmId" :filmInfo="item"></film-item>
    </div>

    <div v-show="loading" class="page-films__loading">
      <van-loading color="#1989fa" />
      <span>加载中...</span>
    </div>

    <div v-show="finished" class="page-films__loading">
      <span>没有更多</span>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
// import LvTabs from '../../components/LvTabs'
// 推荐别名写法。vue脚手架创建的项目中有一个别名叫做 @ 这个别名就代表着 src 目录
import LvTabs from '@/components/LvTabs'
import FilmItem from '@/components/FilmItem'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'Films',

  inject: ['home'],

  components: {
    LvTabs,
    FilmItem
  },

  data () {
    return {
      // 控制tab默认的选中
      curTabIndex: 0,
      bannerList: [],

      filmList: [],
      pageNum: 1,
      pageSize: 10,
      // 总共有多少页
      totalPages: 1,
      // 影片数据加载中
      loading: false,
      // 是否全部加载完成
      finished: false
    }
  },

  watch: {
    /**
     * 监听影片类型修改
     */
    curTabIndex (newVal) {
      // 清空当前的 filmList
      this.filmList = []
      // pageNum 重置为 1
      this.pageNum = 1
      // finished 重置为 false
      this.finished = false
      // 发送请求
      this.getFilmList()
    }
  },

  computed: {
    ...mapGetters(['cityId'])
  },

  methods: {
    ...mapMutations(['SET_TITLE']),

    /**
     * 获取轮播图数据
     */
    getBannerList () {
      Axios.get(`https://m.maizuo.com/gateway?type=2&cityId=${this.cityId}&k=3666367`, {
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1575095471541165882348","bc":"440300"}',
          'X-Host': 'mall.cfg.common-banner'
        }
      }).then(response => {
        const { data } = response
        this.bannerList = data.data
      })
    },

    /**
     * 获取影片列表数据
     */
    getFilmList () {
      // 加载中
      this.loading = true

      Axios.get('https://m.maizuo.com/gateway', {
        params: {
          cityId: this.cityId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: this.curTabIndex === 0 ? 1 : 2, // 控制影片类型
          k: 9853774
        },
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1575095471541165882348","bc":"440300"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(response => {
        const { data } = response
        // 数组拼接
        this.filmList = [...this.filmList, ...data.data.films]

        // 总的页数
        this.totalPages = Math.ceil(data.data.total / this.pageSize)

        // 加载完成
        this.loading = false
      })
    },

    /**
     * 滚动发生
     */
    onScroll (event) {
      // 判断是否滚动到底部
      const clientHeight = event.target.clientHeight
      const scrollHeight = event.target.scrollHeight
      const scrollTop = event.target.scrollTop
      const isEnd = scrollTop >= scrollHeight - clientHeight - 50
      // 滚动到底部并且没在加载状态中
      if (isEnd && !this.loading) {
        if (this.pageNum >= this.totalPages) {
          this.finished = true
          return
        }
        // 下一页
        this.pageNum++
        // 发请求
        this.getFilmList()
      }
    }
  },

  created () {
    this.SET_TITLE('影片列表')
    this.getBannerList()
    this.getFilmList()
  },

  mounted () {
    this.home.$refs['homeView'].addEventListener('scroll', this.onScroll)
  }
}
</script>

<style lang="scss">
.page-films {
  &__swiper {
    height: 210px;
    img {
      width: 100%;
    }
  }
  &__list {
    padding-left: 15px;
    background: #fff;
  }
  &__loading {
    display: flex;
    justify-content: center;
    height: 50px;
    line-height: 50px;
    background-color: #ededed;
    color: #1989fa;
    span {
      margin-left: 10px;
    }
  }
}
</style>
